<template>
  <div class="addr-merge-win">
    <!-- 合并目标地址 合并预览 -->
    <el-dialog
      class="merge-address_dialog"
      title="合并目标地址"
      :visible.sync="visible"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="40%"
      size="small"
      @close="closeDialog"
      :before-close="onOk"
    >
      <el-form ref="form" label-width="80px" size="mini">
        <el-form-item label="已选择">
          <el-select v-model="sbmChecks" multiple placeholder="请选择选择" style="width: 400px;">
            <el-option
              v-for="(e, index) in mergeAddressOptions"
              :key="index"
              :label="e.label"
              :value="e.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合并地址">
          <el-select v-model="mergeToAddress" placeholder="选择合并到哪个地址" style="width: 400px;" filterable>
            <el-option
              v-for="(e, index) in mergeAddressOptions"
              :key="index"
              :label="e.label"
              :value="e.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="merge-tips">
          <div class="tips-item">
            <img :src="tips" style="width:12px;height:12px;margin-right:4px;" alt="tips" /> 合并后无法撤回，是否确定合并？
          </div>
          <el-form-item>
            <el-button type="primary" @click="confirmMergeAddress">确定</el-button>
            <el-button @click="onOk()">取 消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import tips from "@/icons/tips.png";
import { addOperationLog } from "../../../utils";
export default {
  props: {
    visible: Boolean,
    onOk: Function,
    confirmSubmit: Function,
    mergeAddressOptions: Array,
    checks: Array,
  },
  data() {
    return {
      tips,
      mergeToAddress: "",
      sbmChecks: []
    };
  },
  watch: {
    checks: function(val, oval){
      this.sbmChecks = val
    }
  },
  methods: {
    async confirmMergeAddress() {
      if (!this.mergeToAddress) {
        this.$message.warning("请选择需要合并的地址");
        return;
      }
      const res = await this.axios.post(
        this.apis.addressDataUpdateTargetAddress,
        {
          old_target_address: this.sbmChecks,
          new_target_address: this.mergeToAddress,
          import_file_record_id: Number(this.$store.state.currentFileInfo.id),
        }
      );
      if (res.retCode === 2000) {
        this.$message.success("合并成功!");
        await addOperationLog({
          title: "合并目标地址",
          content: {
            old_target_address: this.sbmChecks,
            new_target_address: this.mergeToAddress,
          },
        });
        this.onOk();
      }
    },
    closeDialog() {
      this.mergeToAddress = "";
    },
  },
};
</script>

<style>
.merge-address_dialog .el-select .el-icon-close {
  /* display: none; */
}
.tips-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
